<template>
  <div>
    <ul class="main_left_list bmzc_ul">
      <li :class="{ cur: index == 1 }">
        <router-link :to="{ path: '/news/first.html' }"
          ><span>小学新生入学报名</span></router-link
        >
      </li>
      <li :class="{ cur: index == 2 }">
        <router-link :to="{ path: '/news/second.html' }"
          ><span>初中新生入学报名</span></router-link
        >
      </li>
      <li :class="{ cur: index == 3 }">
        <router-link :to="{ path: '/news/third.html' }"
          ><span>中考外地回长生报名</span></router-link
        >
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      index: 1,
    };
  },

  mounted() {
    // 样式高亮
    this.changeSelected();
  },

  methods: {
    changeSelected() {
      let path = "";
      if (arguments.length == 1) path = arguments[0];
      else path = this.$route.path;
      if (path.endsWith("first.html")) this.index = 1;
      else if (path.endsWith("second.html")) this.index = 2;
      else if (path.endsWith("third.html")) this.index = 3;
      console.log("当前news路由:", path, this.index);
    },
  },
  watch: {
    $route(to) {
      /**
       * 使用这个钩子函数的时候路由父路由没有变化，还是会重新加载mounted
       * 要不然就不会重新mounted调用
       */
      console.log("watch:", to.path);
      this.changeSelected(to.path);
    },
  },
};
</script>

<style scoped>
</style>